<template>
    <div class="page-wrap">
        <div class="page-cont">
            <h-section title="变更影响" collapse>
                <div class="section-body">
                    <section class="section-body-request" v-if="detail.pmpRequestInfoDTO && detail.pmpRequestInfoDTO.id">
                        <div class="section-body-title">相关业务需求</div>
                        <div>
                            <span class="section-body-subtitle">{{ detail.pmpRequestInfoDTO.requestName }}</span>
                            <span class="section-body-number">{{ detail.pmpRequestInfoDTO.requestNumber }}</span>
                        </div>
                        <a-row :gutter="24">
                            <a-col :span="8">
                                <span class="title">所属产品：</span>
                                <span>{{ detail.pmpProductDetailDTO.systemName }}</span>
                            </a-col>
                            <a-col :span="8">
                                <span class="title">产品经理：</span>
                                <span>{{ detail.pmpProductDetailDTO.productManager }}</span>
                            </a-col>
                            <a-col :span="8">
                                <span class="title">需求阶段：</span>
                                <span>{{ $filters.valToNameFilter('stage', detail.pmpRequestInfoDTO.stage) }}</span>
                            </a-col>
                        </a-row>
                    </section>
                    <section class="section-body-version" v-if="detail.versionDTOS && detail.versionDTOS.length">
                        <div class="section-body-title">研发版本</div>
                        <!-- 版本表格 -->
                        <a-table
                            rowKey="id"
                            size="small"
                            :loading="loading"
                            :columns="tableColumns"
                            :data-source="detail.versionDTOS"
                            :pagination="false"
                        >
                            <template #processStatus="{ record }">
                                {{ $filters.valToNameFilter('processStatus', record.processStatus) }}
                            </template>
                            <template #expectTime="{ record }">
                                {{ $filters.dateFilter(record.expectTime) }}
                            </template>
                            <!-- 嵌套产品需求表格 -->
                            <template v-slot:expandedRowRender="{ record }">
                                <a-table rowKey="id" :columns="productTableColumns" :data-source="record.pmpProductRequires" :pagination="false">
                                    <template #requireType="{ record }">
                                        <h-product-type :type="$filters.valToNameFilter('requireType', record.requireType)" />
                                    </template>
                                    <template #level="{ record }">
                                        <h-level :level="record.level" v-if="record.level" />
                                    </template>
                                </a-table>
                            </template>
                        </a-table>
                        <div class="consume-cont">
                            <span class="caption-font-color">已耗时：</span>
                            <span class="error-color">{{ consumeTime.d }}</span>
                            <span>天</span>
                            <span class="error-color">{{ consumeTime.h }}</span>
                            <span>小时</span>
                            <span class="error-color">{{ consumeTime.m }}</span>
                            <span>分钟</span>
                        </div>
                    </section>
                </div>
            </h-section>
        </div>
    </div>
</template>

<script lang="ts">
import HLevel from '@/components/HLevel/index.vue';
import HProductType from '@/components/HProdutType/index.vue';
import { defineComponent, reactive, toRefs, getCurrentInstance } from 'vue';
export default defineComponent({
    name: 'FirstRequire',
    components: {
        HLevel,
        HProductType
    },
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const instance: any = getCurrentInstance();
        const tableColumns = [
            {
                title: '版本',
                dataIndex: 'versionNumber'
            },
            {
                title: '版本名称',
                dataIndex: 'versionName'
            },
            {
                title: '预计交付时间',
                dataIndex: 'expectTime',
                slots: { customRender: 'expectTime' }
            },
            {
                title: '流程状态',
                dataIndex: 'processStatus',
                slots: { customRender: 'processStatus' }
            }
        ];
        const productTableColumns = [
            {
                title: '需求名称',
                dataIndex: 'requireName',
                ellipsis: true
            },
            {
                title: '需求类型',
                dataIndex: 'requireType',
                slots: { customRender: 'requireType' }
            },
            {
                title: '优先级',
                dataIndex: 'level',
                slots: { customRender: 'level' }
            }
        ];
        const state = reactive({
            loading: false,
            consumeTime: {
                d: '',
                h: '',
                m: ''
            }
        });
        const initConsumeTime = () => {
            const { versionDTOS, updateTime, status } = props.detail;
            if (versionDTOS && versionDTOS.length) {
                const consumeTime = versionDTOS.reduce((prev, curr) => {
                    // 变更结束之后用更新时间计算，没结束用当前时间计算
                    prev +=
                        (+status < 5 ? instance.proxy.$moment().unix() : instance.proxy.$moment(updateTime).unix()) -
                        instance.proxy.$moment(curr.startTime).unix();
                    return prev;
                }, 0);
                const duration = instance.proxy.$moment.duration(consumeTime, 'seconds');
                state.consumeTime = {
                    d: duration.days(),
                    h: duration.hours(),
                    m: duration.minutes()
                };
            }
        };
        // 有版本去计算耗时
        initConsumeTime();
        return {
            tableColumns,
            productTableColumns,
            ...toRefs(state)
        };
    }
});
</script>
<style lang="less" scoped>
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .section-body {
            section {
                margin-bottom: 16px;
            }
            &-title {
                margin-bottom: 16px;
            }
            &-subtitle {
                font-size: 16px;
                color: #172b4d;
                font-weight: bold;
            }
            &-number {
                margin-left: 16px;
                font-size: 16px;
                color: @primary-color;
            }
            &-request {
                .ant-row {
                    line-height: 40px;
                    font-size: 14px;
                    .title {
                        color: @caption-font-color;
                    }
                }
            }
            &-version {
                .consume-cont {
                    margin-top: 8px;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>
